<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>友邦保险</title>
<link href="blitzer/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<link href="validationEngine.jquery.css"  type="text/css"  rel="stylesheet" />
<link href="main2.css"  type="text/css"  rel="stylesheet" />
<script language="javascript" src="js/jquery.js"></script>
<script language="javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
<script language="javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
<script language="javascript" src="js/jquery.validationEngine.js"></script>
<script language="javascript" src="js/jquery.validationEngine-zh_CN.js"></script>
<script language="javascript" src="js/group.js"></script>
<script language="javascript">
var G_PID = "<s:property escape="false" value="gpinsu.GI_ID" />";
function ajaxSubmit()
{
	var isValidate = $('#form1').validationEngine('validate');
	if(!isValidate){
		alert("请正确输入");
		setTimeout("$('#form1').validationEngine('hide')",4000);
		return;
	}
	
	$.ajax
	({
		type:"POST",
		dataType:'json',
		cache:false,
		timeout:10000,
		async:false,
		url:"../json/groupForm1Json.action",
		data:$("#form1").serialize(),
		success:function(json)
		   {
			  if(json.success==true)
			  {		
				  //alert("提交成功！")
				  //window.location.href="form2.jsp";
				  window.location.href='form2.jsp?rid='+json.guid+'&refid=<s:property escape="false" value="refid" />';
			  }
			  else
			  {
				  alert("提交没有成功:"+json.message);
			  }
			},
		error:function(arg1,arg2)
		   {
				alert("浏览器提交失败:" + arg1 + " "+arg2);
		   }
	});
	return false;
}

var G_REF=<s:property escape="false" value="@com.aia.aia2.web.MyHelper@toFormdataJson(refid)" />;

$(function(){

var selects = $('.pecentSelect');
var select1 = $('#pecentSelect1');
var select2 = $('#pecentSelect2');
var select3 = $('#pecentSelect3');
var select4 = $('#pecentSelect4');
select1.data("index",1);
select2.data("index",2);
select3.data("index",3);
select4.data("index",4);

var CNT1 = $('#CNT1');
var CNT2 = $('#CNT2');
var CNT3 = $('#CNT3');
var CNT4 = $('#CNT4');
CNT1.data("index",1);
CNT2.data("index",2);
CNT3.data("index",3);
CNT4.data("index",4);
var mycnts = $('.mycnts');
mycnts.each(function(item, index){
	var _this = $(this);
	_this.bind('change',function(){
		var _this = $(this);
		var _index = _this.data("index");
		var myval = _this.val();
		if(myval==''){
			_this.val('0');
			myval = 0;
		}
		/*
		if(_this.val()==''){
			_this.val('0');
			_this.trigger('change');
			return;
		}
		*/
		//TODO 选择智能化
		//var objectSmart = smartSelect(_index);
		updateNumber(myval,_index);
	});
});	

var slider1 = $('#slider1');
var slider2 = $('#slider2');
var slider3 = $('#slider3');
var slider4 = $('#slider4');
slider1.data("index",1);
slider2.data("index",2);
slider3.data("index",3);
slider4.data("index",4);

var FD_COUNT = $('#FD_COUNT'); 





//FD_COUNT.bind('change', function(){
//	updateAll();
//});

//判断是否为整数
function checkNumber(arg1)
{
 var re = /^[0-9]+$/;
 if (!re.test(arg1)){
  return false;
 }
 return true;
} 

//把string转为整数
function safeInt(argString){
	var result = 0;
	if(argString!=''){
		try{
			result = parseInt(argString, 10);
			if(result == NaN){
				result = 0;
			}
		}catch(e){}
	}
	return result;
}

 
//得到总人数
function fetchTotalCount(){
	var myval =  FD_COUNT.val();
	return safeInt(myval)
}

//触发所有的下拉框事件
function updateAll(){
	mycnts.trigger('change');
}

//更新一个输入框，最后会调用updateJobAndSlider方法
//argValue=人数
//argIndex=序号，可以是1,2,3,4表示第几列
function updateNumber(argValue, argIndex, isSouHa){
	argValue = argValue || 0;
	if(FD_COUNT.validationEngine('validate')){
	 alert('员工总人数为一个不小于5的整数');	
	 return;
	}
	var maxvalue = safeInt(argValue);
	updateJobAndSlider(argIndex, maxvalue);
}

//更新一个下拉框事件，最后会调用updateJobAndSlider方法
//argPencent=百分比值,比如为1,2,3...97,98,100，需要除以100
//argIndex=序号，可以是1,2,3,4表示第几列
function updatePecent(argPencent, argIndex, isSouHa){
	if(argPencent==''){
		return;
	}
	if(FD_COUNT.validationEngine('validate')){
	 alert('员工总人数为一个不小于5的整数');	
	 return;
	}
	var totalNumber = 100;
	try{
		//totalNumber = parseInt($('#FD_COUNT').val(),10);
		totalNumber = fetchTotalCount();
	} catch(e){}
	var percentNumber = parseInt(argPencent, 10);
	var maxCount = Math.round((totalNumber*percentNumber)/100);
	updateJobAndSlider(argIndex, maxCount);
}

//更新一个列中的“年龄分布”,“职业类别1”与“职业类别2” 	，平均分为两个值
//argIndex=列序号， 为1,2,3,4
//maxCount=这一列的最大值
function updateJobAndSlider(argIndex, maxCount){
	$('#CNT'+argIndex).val(maxCount);  //更新一个列中的“年龄分布”
	var jobNum1 = Math.round(maxCount/2);
	var jobNum2 = maxCount - jobNum1;
	$('#CNTA'+argIndex).val(jobNum1);  //更新一个列中的“职业类别1”
	$('#CNTB'+argIndex).val(jobNum2);  //更新一个列中的“职业类别2”
	
	var sliderJq = $('#slider'+argIndex);
	sliderJq.slider( "option", "max", maxCount );
	sliderJq.slider( "option", "value", jobNum1 );
	sliderJq.unbind("slidechange"); //解绑事件
	sliderJq.bind("slide", function( event, ui){ // 重新绑定事件
		var _this = $(this);
		var _index = _this.data("index");
		var _max = _this.slider( "option", "max");
		var _value = ui.value;
		var _value2 = _max - _value;
		$('#CNTA'+_index).val(_value); 
		$('#CNTB'+_index).val(_value2); 
	});
}

/*
function smartSelect(argIndex){
	var objectSmart ={"key1":0,"key2":0,"key3":0,"key4":0};
	var select1CurrentValue = safeInt(select1.val());
	var select2CurrentValue = safeInt(select2.val());
	var select3CurrentValue = safeInt(select3.val());
	var select4CurrentValue = safeInt(select4.val());
}
*/
selects.each(function(item, index){
	var _this = $(this);
	_this.bind('change',function(){
		var _this = $(this);
		var _index = _this.data("index");
		
		if(_this.val()==''){
			_this.val('0');
			_this.trigger('change');
			return;
		}
		
		//TODO 选择智能化
		//var objectSmart = smartSelect(_index);
		
		updatePecent(_this.val(),_index);
		
		// 当第1，2，3列选中的时候 ，如果下一列未选择，需要自动选择下一列，数值为剩下的所有人数
		
		//当选择第四列的时候不联动
		if(_index>=4){
			return;
		}
		
		//没有输入总数的时候不联动
		if(fetchTotalCount()==0){
			return;
		}
		
		//计算已经选择的百分比
		var valueSelect = 0;
		for(var i = 1; i<=_index; i++){
			var tempval = $('#pecentSelect'+i).val()
			valueSelect += safeInt(tempval);
		}
		//剩下的百分比
		var valueRemain = 100 - valueSelect;
		var nextIndex = (_index+1);
		if(nextIndex>4){
			nextIndex=1;
		}
		
		if(valueRemain>0){
			var nextSelect = $('#pecentSelect' + nextIndex);
			if(nextSelect.val()=='' || nextSelect.val()=='0'){//如果未选择就改val
				nextSelect.val(''+valueRemain);
				nextSelect.trigger('change');
			}	
		}
	});
});	



$("#form1").validationEngine({scroll:false}); 
	
$('.myslider').slider({
	max: 100,
	value: 50,
	orientation: "vertical"
})

if(fetchTotalCount()>0){
	updateAll(); //在firefox中，刷新当前页时下拉框已经选定了，需要更新所有的状态	
}


if(G_REF!=null){
	$('#FD_COUNT').val(G_REF.FD_COUNT);
	
	if(G_REF.FD_PLAN == 1){
		$('#FD_PLAN1').attr('checked','checked');
	}else if(G_REF.FD_PLAN == 2){
		$('#FD_PLAN2').attr('checked','checked');
		$('#FD_PLAN1').removeAttr('checked');
	}
	
}



}); // END of ready


</script>

</head>
<body>
<div class="bg">
	<div class="top">
		<%@include file="common_left.jsp" %>
		
		<div class="right">
			<div style="height:330px; overflow: hidden;"></div>
			<div class="content_right">
		<form id="form1">
		<input type="hidden" name="GI_ID" id="GI_ID" value="<s:property escape="false" value="pid" />" />
			<div style="width:400px; height:450px; margin-left:31px;">
				<div style="color:#d31145; font-size:14px; font-weight:bold; line-height:1.5; height:24px; overflow:hidden">
				* 填写以下信息，立即为您试算保费！<a href="form3.jsp?pid=<s:property escape="false" value="gpinsu.GI_ID" />" class="connect"></a>
				</div>
				<table  class="mytable" width="100%" style="margin-top:5px;" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="left_td" width="117" ><span class="num">1.</span> <span>产品计划</span></td>
    <td class="longputHolder"><span style="font-size: 16px; font-weight: bold; line-height: 26px;"><s:property escape="false" value="gpinsu.GI_SHORT" /></span></td>
  </tr>
  <tr>
    <td class="left_td" width="117" ><span class="num">2.</span> <span>员工总人数</span></td>
    <td class="longputHolder"><!--  --><input class="validate[required,custom[integer],min[5]] longput"  name="FD_COUNT"  id="FD_COUNT" type="text" /></td>
  </tr>
  <tr>
    <td class="left_td" ><span class="num">3.</span> <span>年龄分布</span></td>
    <td style=""> 
	<!-- 年龄分布 start-->
		<table class="detailtable" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>16-30岁</td>
    <td>31-40岁</td>
    <td>41-50岁</td>
    <td>51-55岁</td>
  </tr>
  <tr>
    <td class="inputHolder"><input id="CNT1" name="CNT1" type="text" 
    data-errormessage-custom-error="* 请输入一个不大于员工总人数的整数" 
    data-errormessage-value-missing="* 请在四个年龄分布中至少输入一个整数" 
    class="validate[groupRequired[CNT_GROUP],custom[integer]] myinput mycnts" ></input><span>人</span></td>
    <td class="inputHolder"><input id="CNT2" name="CNT2" type="text"  
    data-errormessage-custom-error="* 请输入一个不大于员工总人数的整数" 
    data-errormessage-value-missing="* 请在四个年龄分布中至少输入一个整数" 
    class="validate[groupRequired[CNT_GROUP],custom[integer]] myinput mycnts" ></input><span>人</span></td>
    <td class="inputHolder"><input id="CNT3" name="CNT3" type="text" 
    data-errormessage-custom-error="* 请输入一个不大于员工总人数的整数" 
    data-errormessage-value-missing="* 请在四个年龄分布中至少输入一个整数" 
    class="validate[groupRequired[CNT_GROUP],custom[integer]] myinput mycnts" ></input><span>人</span></td>
    <td class="inputHolder"><input id="CNT4" name="CNT4" type="text" 
    data-errormessage-custom-error="* 请输入一个不大于员工总人数的整数" 
    data-errormessage-value-missing="* 请在四个年龄分布中至少输入一个整数" 
    class="validate[groupRequired[CNT_GROUP],custom[integer]] myinput mycnts" ></input><span>人</span></td>
  </tr>
</table>
	<!-- 年龄分布 end-->	
	</td>
  </tr>
   <tr>
    <td class="left_td" style="padding-bottom:0; padding-top:0; line-height:20px;" width="117"><span class="num">4.</span> <span>职业分布</span></td>
    <td  class="downloadlinkholder" ><a target="_blank" href="aia_doc.pdf" style="color: #D31145;">【职业等级分类表】</a>&nbsp;&nbsp;</td>
  </tr>
  <tr>
    <td class="small_title_td">
	<span>内勤文职人员</span><br />
	<span class="title_desc">(职业类别1-2)</span>
	</td>
	<td>
	<!--职业类别1 start-->
	  <table class="detailtable" width="100%" border="0" cellspacing="0" cellpadding="0">
	  <tr>
		<td class="inputHolder"><input readonly="readonly" id="CNTA1" name="CNTA1" class="myinput" type="text"  ></input><span>人</span></td>
		<td class="inputHolder"><input readonly="readonly" id="CNTA2" name="CNTA2" class="myinput" type="text"  ></input><span>人</span></td>
		<td class="inputHolder"><input readonly="readonly" id="CNTA3" name="CNTA3" class="myinput" type="text"  ></input><span>人</span></td>
		<td class="inputHolder"><input readonly="readonly" id="CNTA4" name="CNTA4" class="myinput" type="text"  ></input><span>人</span></td>
	  </tr>
	</table>
	<!--职业类别1 end-->
    </td>
  </tr>
  
  <tr>
    <td class="small_title_td">&nbsp;
	
	</td>
	<td>
	<!--滑动 start-->
	<table class="detailtable" width="100%" border="0" cellspacing="0" cellpadding="0">
	  <tr>
		<td class="inputHolder"><div class="sliderHolder"><div id="slider1" class="myslider"></div></div></td>
		<td class="inputHolder"><div class="sliderHolder"><div id="slider2" class="myslider"></div></div></td>
		<td class="inputHolder"><div class="sliderHolder"><div id="slider3" class="myslider"></div></div></td>
		<td class="inputHolder"><div class="sliderHolder"><div id="slider4" class="myslider"></div></div></td>
	  </tr>
	</table>
	<!--滑动 end-->
	</td>
  </tr>
  
  <tr>
    <td class="small_title_td">
		<span>外勤及工人</span><br />
		<span class="title_desc">(职业类别3-4)</span>
	</td>
	<td>
	<!--职业类别2 start-->
	  <table class="detailtable" width="100%" border="0" cellspacing="0" cellpadding="0">
	  <tr>
		<td class="inputHolder"><input readonly="readonly" id="CNTB1" name="CNTB1" class="myinput" type="text"  ></input><span>人</span></td>
		<td class="inputHolder"><input readonly="readonly" id="CNTB2" name="CNTB2" class="myinput" type="text"  ></input><span>人</span></td>
		<td class="inputHolder"><input readonly="readonly" id="CNTB3" name="CNTB3" class="myinput" type="text"  ></input><span>人</span></td>
		<td class="inputHolder"><input readonly="readonly" id="CNTB4" name="CNTB4" class="myinput" type="text"  ></input><span>人</span></td>
	  </tr>
	</table>
	<!--职业类别2 end--></td>
  </tr>
  
   <tr>
    <td class="left_td" width="117"><span class="num">5.</span> <span>计划选择</span></td>
    <td class="radioHolder">
	    <span style="margin-left:20px" >经济型</span>
	    	<input name="FD_PLAN" id="FD_PLAN1" type="radio" value="1" checked />
	    <span style="margin-left:20px" >豪华型</span>
	    	<input name="FD_PLAN" id="FD_PLAN2" type="radio" value="2" />
    </td>
  </tr>
  
  <tr>
    <td  colspan="2" class="submitHolder" valign="middle" align="center" ><a href="#" onclick="ajaxSubmit(); return false;" class="linkButton" style="">提&nbsp;&nbsp;&nbsp;交</a></td>
    
  </tr>
  
</table>

				
			</div>
			</form>
		</div>
		</div>
		<div class="clear"></div>
	</div>
</div>
<%@include file="common_ga.jsp" %>
</body>
</html>